<script setup name="PeriodicTable">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { lStorage } from '@/utils/storage'
import { periodicTable } from '../utils/periodicTable.js'

// Props 定义
const props = defineProps({
	// 可点击的元素数组，如果为空则所有元素都可点击
	clickableElements: {
		type: Array,
		default: () => [],
	},
	// 有数据的元素数组
	hasDataElements: {
		type: Array,
		default: () => [],
	},
	// 当前选中的元素数组
	selectedElements: {
		type: Array,
		default: () => [],
	},
})

// Emits 定义
const emit = defineEmits(['elementClick'])

// 获取当前语言
const currentLocale = computed(
	() => lStorage.getReactive().value.language || 'zh'
)

const newPeriodicTable = computed(() => {
	return periodicTable.map((element) => {
		return {
			...element,
			hasData: props.clickableElements.includes(element.symbol),
		}
	})
})

// 计算属性：判断元素是否可点击
const isElementClickable = (element) => {
	// 如果父组件没有传递可点击元素数组，则所有元素都可点击
	if (!props.clickableElements || props.clickableElements.length === 0) {
		return true
	}
	// 否则检查元素是否在可点击数组中
	return props.clickableElements.includes(element.symbol)
}

// 计算属性：判断元素是否已选中
const isElementSelected = (element) => {
	return (
		props.selectedElements && props.selectedElements.includes(element.symbol)
	)
}

// 计算属性：判断元素是否有数据（优化逻辑）
const hasElementData = (element) => {
	// 如果元素已被选中，则不显示为有数据状态（避免与选中状态冲突）
	if (
		props.selectedElements &&
		props.selectedElements.includes(element.symbol)
	) {
		return false
	}

	// 优先检查数据中的 hasData 属性
	if (element.hasData) {
		return true
	}
	// 然后检查 props 中的 hasDataElements 数组
	return props.hasDataElements && props.hasDataElements.includes(element.symbol)
}

// 点击元素处理
const handleElementClick = (element) => {
	// 只有可点击的元素才能触发事件
	if (isElementClickable(element)) {
		emit('elementClick', element)
	}
}
</script>

<template>
	<div class="periodic-table">
		<template v-for="element in newPeriodicTable" :key="element.number">
			<div
				class="element"
				:class="{
					'element-has-data': hasElementData(element),
					'element-clickable': isElementClickable(element),
					'element-disabled': !isElementClickable(element),
					'element-selected': isElementSelected(element),
				}"
				:style="`grid-row: ${element.row}; grid-column: ${element.col}`"
				@click="handleElementClick(element)"
				:title="`${element.symbol} (${element.number})`"
			>
				<div class="element-header">
					<span class="element-number">{{ element.number }}</span>
					<!-- 只在中文模式下显示中文名称 -->
					<span v-if="currentLocale === 'zh'" class="element-chinese">{{
						element.chinese
					}}</span>
				</div>
				<span class="element-symbol">{{ element.symbol }}</span>
			</div>
		</template>
	</div>
</template>

<style scoped lang="scss">
.periodic-table {
	display: grid;
	grid-template-columns: repeat(18, minmax(30px, 1fr));
	grid-template-rows: repeat(9, auto);
	gap: clamp(2px, 0.5vw, 8px);
	width: 100%;
	max-width: 100%;
	background: transparent;
	padding: clamp(4px, 1vw, 12px);
	box-sizing: border-box;

	// 确保容器不会溢出
	overflow: hidden;

	// 最小总宽度确保周期表可读性
	min-width: 600px;
}

.element {
	// 使用相对单位实现真正的自适应
	min-width: clamp(28px, 3.5vw, 65px);
	width: 100%;
	aspect-ratio: 1.2 / 1; // 保持宽高比
	min-height: 32px;
	max-height: 55px;

	background: var(--ptable-bg-normal);
	border: 1px solid var(--ptable-border);
	border-radius: var(--global-border-radius);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition:
		border-color 0.2s,
		background 0.2s,
		color 0.2s,
		box-shadow 0.2s;
	box-sizing: border-box;
	cursor: pointer;
	padding: clamp(2px, 0.3vw, 6px);
	user-select: none;
	overflow: hidden;

	// 确保正确的字体渲染
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&:hover {
		border-color: var(--ptable-bg-highlight);
		background: rgba(59, 130, 246, 0.1);
		box-shadow: 0 2px 8px 0 rgba(59, 130, 246, 0.1);
	}

	&.element-has-data {
		background: var(--ptable-bg-highlight);
		border-color: var(--ptable-bg-highlight);
		.element-symbol,
		.element-chinese,
		.element-number {
			color: var(--ptable-text-highlight);
		}
		&:hover {
			background: var(--ptable-bg-highlight);
			box-shadow: 0 4px 16px 0 rgba(59, 130, 246, 0.18);
		}
	}

	&.element-disabled {
		cursor: not-allowed;
		opacity: 0.5;
		box-shadow: none;
	}

	&.element-selected {
		background: var(--ptable-bg-selected);
		border-color: var(--ptable-bg-selected);
		animation: selectedPulse 2s ease-in-out infinite alternate;
		.element-symbol,
		.element-chinese,
		.element-number {
			color: var(--ptable-text-selected);
		}
		&:hover {
			background: var(--ptable-bg-selected);
			box-shadow: 0 4px 16px 0 rgba(16, 185, 129, 0.18);
		}
	}

	&.element-clickable:not(.element-selected):not(.element-has-data) {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: -2px;
			border: 2px solid var(--ptable-bg-highlight);
			border-radius: calc(var(--global-border-radius) + 2px);
			opacity: 0.6;
			animation: clickableGlow 2s ease-in-out infinite alternate;
		}
	}

	.element-header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		position: absolute;
		top: clamp(1px, 0.2vw, 3px);
		left: 0;
		padding: 0 clamp(2px, 0.3vw, 5px);
		box-sizing: border-box;
	}

	.element-number {
		font-size: clamp(6px, 0.7vw, 10px);
		color: var(--ptable-text-muted);
		font-weight: 400;
		line-height: 1;
	}

	.element-chinese {
		font-size: clamp(7px, 0.8vw, 12px);
		color: var(--ptable-text-muted);
		font-weight: 400;
		line-height: 1;
		max-width: clamp(12px, 2vw, 24px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.element-symbol {
		display: block;
		margin: 0 auto;
		font-size: clamp(8px, 1.2vw, 18px);
		font-weight: 600;
		color: var(--ptable-text-normal);
		position: relative;
		top: clamp(3px, 0.5vw, 8px);
		line-height: 1;
		text-align: center;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* 针对不同屏幕尺寸的具体优化 */

/* 超大屏幕 (1920px+) */
@media (min-width: 1920px) {
	.periodic-table {
		max-width: 1600px;
		margin: 0 auto;
		gap: 10px;
		padding: 16px;
	}

	.element {
		min-width: 65px;
		max-height: 58px;

		.element-number {
			font-size: 14px;
		}
		.element-chinese {
			font-size: 14px;
			max-width: 24px;
		}
		.element-symbol {
			font-size: 18px;
			top: 8px;
		}
	}
}

/* 大屏幕 (1440px-1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
	.periodic-table {
		gap: 8px;
		padding: 12px;
	}

	.element {
		min-width: 55px;

		.element-number {
			font-size: 9px;
		}
		.element-chinese {
			font-size: 11px;
			max-width: 22px;
		}
		.element-symbol {
			font-size: 16px;
			top: 7px;
		}
	}
}

/* 中大屏幕 (1200px-1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
	.periodic-table {
		gap: 6px;
		padding: 10px;
		min-width: 900px;
	}

	.element {
		min-width: 45px;

		.element-number {
			font-size: 8px;
		}
		.element-chinese {
			font-size: 10px;
			max-width: 20px;
		}
		.element-symbol {
			font-size: 14px;
			top: 6px;
		}
	}
}

/* 中屏幕 (900px-1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
	.periodic-table {
		gap: 4px;
		padding: 8px;
		min-width: 720px;
	}

	.element {
		min-width: 38px;

		.element-number {
			font-size: 7px;
		}
		.element-chinese {
			font-size: 9px;
			max-width: 18px;
		}
		.element-symbol {
			font-size: 12px;
			top: 5px;
		}
	}
}

/* 小屏幕 (768px-899px) */
@media (min-width: 768px) and (max-width: 899px) {
	.periodic-table {
		gap: 3px;
		padding: 6px;
		min-width: 600px;
		// 允许横向滚动
		overflow-x: auto;
	}

	.element {
		min-width: 32px;
		min-height: 28px;

		.element-header {
			top: 1px;
			padding: 0 2px;
		}

		.element-number {
			font-size: 6px;
		}
		.element-chinese {
			font-size: 8px;
			max-width: 16px;
		}
		.element-symbol {
			font-size: 10px;
			top: 4px;
		}
	}
}

/* 超小屏幕 (<=767px) */
@media (max-width: 767px) {
	.periodic-table {
		gap: 2px;
		padding: 4px;
		min-width: 540px;
		// 强制横向滚动
		overflow-x: auto;
		overflow-y: hidden;
	}

	.element {
		min-width: 28px;
		min-height: 26px;

		.element-header {
			top: 1px;
			padding: 0 2px;
		}

		.element-number {
			font-size: 5px;
		}
		.element-chinese {
			font-size: 7px;
			max-width: 14px;
		}
		.element-symbol {
			font-size: 9px;
			top: 3px;
		}
	}
}

/* 容器级别的滚动处理 */
@media (max-width: 899px) {
	// 为父容器添加滚动提示
	.periodic-table::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 20px;
		height: 100%;
		background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
		pointer-events: none;
		z-index: 5;
	}

	// 深色模式下的滚动提示
	:global(.dark) .periodic-table::before {
		background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
	}
}

/* 可点击状态发光动画 */
@keyframes clickableGlow {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 0.8;
	}
}

/* 选中状态脉冲动画 */
@keyframes selectedPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}
</style>
